<template>
	<view>
		<view class="order-top">
			<view class="" v-for="(item,index) in orderlist" :key="index" @click="selecttop(index)">
				<view class="top-item" :class="topindex === index ? 'top-itemclor' : ''">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="tableclass" v-for="(item,index) in 2" :key="index">
			<table>
			  <tr >
			    <td>学生电话</td>
				<td>13104826653</td>
			  </tr>
			  <tr >
				  <td>辅导地点</td>
				  <td>北京</td>
				  
			  </tr>
			  <tr >
			  		<td>辅导时间</td>
					<td>2023年8月31日18:13:00</td>
			  </tr>
			  <tr >
			  	  <td>辅导科目</td>
				  <td>初一数学</td>
			  </tr>
			  <tr >
			  	  <td>辅导频率</td>
			  	  <td>每周7次 一次2小时</td>
			  </tr>
			  <tr>
			  	  <td>总金额</td>
			  	  <td>¥1080</td>
			  </tr> 
			</table>
		</view>
	</view>
</template>

<script>
	import comorderlist from '@/components/order/order-list.vue'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				topindex: 0,
				orderdata:[],
				orderlist: [
					{name: "全部",
					
					},
					{
						name: "待接洽",
						
					},
					{
						name: "已接洽",
						
					},
				]
			}
		},
		methods: {
			selecttop(index) {
				this.topindex = index
			},
			getorderdata(){
				
			}
		},
		components: {
			
		},
		onLoad() {
			
		
		},
		computed:{
			
		}
	}
</script>

<style lang="scss">
	.order-top {
		display: flex;
		justify-content: space-around;
		padding: 10rpx;

		.top-itemclor {
			border-bottom: 5rpx solid #42B7FB;
		}

	}
.tableclass{
		margin: 40rpx 0;
		table {
		      width: 100%;
		      border: 1px solid black;
		      margin: 0 auto;
		      border-collapse: collapse;
		  }
		  td {
		      height: 20rpx;
		      border: 1px solid black;
		      text-align: center;
		      vertical-align: center;
		  }
			tr:nth-child(odd){
		  		background-color: #fef3f7;
		  		}
				
			tr:nth-child(even) {
					background-color: #eff9fe;
				}			
				
	}
	
</style>